/**
 * svg描边动画
 * @param {string} selectors 选择器（例：.xxx / #xxx / div）
 * @param {number} time 动画时长（单位秒）
 */
// 将style标签添加到 head 元素中
document.head.insertAdjacentHTML(
  "beforeend",
  `
  <style>
      @keyframes svgAnimation {
          to { stroke-dashoffset: 0; }
      }
  </style>`
);
function svgAnimation(selectors, time = 2) {
  const svg = document.querySelector(selectors);
  if (!(svg instanceof SVGElement)) {
    throw new Error(
      "传入的选择器查找不到相应的svg元素或查找到的不是svg元素，请传入正确的选择器！"
    );
  }
  function deep(children) {
    for (const item of children) {
      if (item.children.length) {
        deep(item.children);
      } else {
        try {
          // 获取路径元素的计算样式
          const pathColor = window
            .getComputedStyle(item)
            .getPropertyValue("fill");
          item.style.strokeWidth = 4;
          item.style.stroke = pathColor;
          item.style.fill = "transparent";
          item.style.strokeLinecap = "round";
          item.style.strokeDasharray = item.getTotalLength() + 1;
          item.style.strokeDashoffset = item.getTotalLength() + 1;
          item.style.animation = `svgAnimation ${time}s forwards`;
          item.style.transition = "fill 1s";
          item.onanimationend = () => {
            item.style.fill = pathColor;
          };
        } catch (error) {}
      }
    }
  }
  deep(svg.children);
}
